<template>
  <div class="WholeScroll process-component" style="max-height: 550px;overflow-y: auto;">
    <el-steps v-if="showSteps" direction="vertical" :active="active">
      <el-step v-for="(item, i) in list" :key="i">
        <span slot="icon" :class="item.type==2?'changeRed':'changeNormal'">{{list.length - i}}</span>
        <div class="step_wrap" slot="title">
          <div>
            <span class="flag" :class="item.type==2?'changeRed':''">【{{item.name}}】{{item.details && item.details.length >0 && item.details[0].desc ? item.details[0].desc : ''}}</span>
            <div v-for="(user, index1) in item.details" :key="user.id || index1">
              <span class="name" :class="item.type==2?'changeRed':''">{{user.name}}</span>
              <span class="date" v-if="item.type!=2">{{ item.date?item.date : '' }}</span>
              <span class="date changeRed" v-if="item.type==2&&isShowLastTime">{{ item.date?item.date : '' }}</span>
            </div>
          </div>
          <div class="content">{{item.description}}</div>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import { processByModule } from '@/api/wf/workflow'
import { Message } from 'element-ui'

export default {
  name: 'WfProcess',
  props: {
    instId: {
      type: String,
      default: null
    },
    url: {
      type: String,
      default: null
    },
    isShowLastTime: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showSteps: '',
      active: 1,
      list: []
    }
  },
  watch: {
    instId() {
      this.getProcess()
    }
  },
  mounted() {
    this.showSteps = false
    this.showSteps = true
    this.getProcess()
  },
  methods: {
    getProcess() {
      if (this.instId) {
        processByModule(this.url, this.instId).then(res => {
          if (res.code === 200) {
            this.$set(this, 'list', res.data.reverse())
            this.setAcitve()
          } else {
            Message({
              message: '获取流程图失败！',
              type: 'info'
            })
          }
        })
      }
    },
    setAcitve() {
      const arr = this.list.filter(function(item) {
        return item.type == 2
      })
      const selected = arr[0]
      const selectedValue = this.list.indexOf(selected)
      this.active = selectedValue < 0 ? (this.list.length + 1) : (selectedValue)
      setTimeout(() => {
        $('.changeRed').parents('.el-step__icon').css({ 'border': '2px solid red' })
        $('.changeNormal').parents('.el-step__icon').css({ 'border': '2px solid #c0c4cc' })
        this.$forceUpdate()
      }, 0)
    }
  }
}
</script>
<style lang="scss">
.process-component {
  .el-step__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }
  .el-step.is-vertical .el-step__line {
    left: 10px;
  }
  .el-step__head.is-process {
    color: #e73636f5 !important;
  }
  .el-step__head.is-process {
    border-color: #e73636f5 !important;
  }
}
.changeRed {
  color: #e73636f5 !important;
  font-weight: bold !important;
}
</style>
